<%@ page language="java" contentType="text/html;charset=gb2312"%>
<%@ page import="java.util.Map"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="java.util.Calendar"%>
<%@ taglib uri="http://www.tsingsoft.com.cn/taglib" prefix="tsing"%>
<%@ page isELIgnored="false" %>
<tsing:authorization module="ST03"/>
<%
  Calendar curr = Calendar.getInstance();
  String maxYear = String.valueOf(curr.get(Calendar.YEAR)+4);
  String minYear = String.valueOf(curr.get(Calendar.YEAR)-5);
%>
<html>
<head>
<LINK href="<tsing:cssDir/>/css.css" rel=stylesheet type=text/css>
<link rel="stylesheet" href="<tsing:cssDir/>/jquery-ui.css">
<script type="text/javascript" src="<tsing:root/>/js/jquery-ui/jquery.js"></script>
<script type="text/javascript" src="<tsing:root/>/js/json2.js"></script>
<SCRIPT SRC="<tsing:root/>/js/echarts.js"></SCRIPT>
<script type="text/javascript" src="<tsing:root/>/js/jquery-ui/jquery-ui.js"></script>
<SCRIPT LANGUAGE=javascript>
	$(document).ready(function() {
		$( "#tabs" ).tabs();
		var w = $(window).width()-30;
		$( "#hisDiv" ).width(w);
		//tabѡ��������������ؼ���echartͼ
		var tabNum = 6;
		for(var i = 1; i <= tabNum; i++){
			ajaxRequest(i);
		}
		
	})

	// �첽��������
	function ajaxRequest(id) {
		var divid = 'contrastChart' + id;
		var netID = $("select[name='netID']").val();
		var caliberID =  $("select[name='caliberID']").val();
		var year = $("select[name='hisYear']").val();
		var month = $("select[name='hisMonth']").val();
		var day = $("select[name='hisDay']").val();
		var param = {
			"netID": netID ,
			"caliberID":caliberID, 
			"year":year,
			"month":month,
			"day":day,
			"id": id
		};

		var url = "<tsing:root/>/stforecast?command=resultContrastChart";
		$.ajax({
				type : "POST",
				url : url,
				cache : false,
				data : param,
				success : function(data) {
				var dataStr = JSON.parse(data);
				if(divid =="contrastChart5"){
					showAllLine(divid,dataStr.obj);
					
				}else{
					showLine(divid,dataStr);
				}
			}
		});
	}
	
	function showLine(divid,dataStr) {
		// ����׼���õ�dom����ʼ��echartsʵ��
        		var myChart = echarts.init(document.getElementById(divid),'macarons');
				var colors = ['#9BCD9B','#FF7F00', '#00B2EE','#9400D3','#212121', '#FF4040'];
				//������ߣ���תҳ��
				myChart.on('click', function (params) {
				if("contrastChart9"==divid){
					//alert("Ԥ�����Ա����ݲ�֧���޸ģ���ѡ������Ԥ�����ϱ�");
					return;//����ԱȽ��治�ɽ��в��� 
				}  
					var netID = $("select[name='netID']").val();
					var caliberID = $("select[name='caliberID']").val();
					var year = $("select[name='hisYear']").val();
					var month = $("select[name='hisMonth']").val();
					var day = $("select[name='hisDay']").val();
                  	var url = "<tsing:root/>/stforecast?command=DayForecastCorrect";//��ת
  						url+="&netID="+netID;
  						url+="&caliberID="+caliberID;
 						url+="&foreYMD="+year+month+day;
  						url+="&queryType="+divid;
  					//window.document.location = url;
                    window.open(url);
                    });
                   
                 var series = [
        				{
            				name:dataStr.lenData[0],
            				type:'line',
            				smooth: true,
            				showSymbol: false,
            				data:dataStr.hisData
        				},
        				{
            				name:dataStr.lenData[1],
            				type:'line',
            				smooth: true,
            				showSymbol: false,
            				data:dataStr.hisFCData
        				},
        				{
            				name:dataStr.lenData[2],
            				type:'line',
            				smooth: true,
            				showSymbol: false,
            				data:dataStr.data
        				},
        				{
            				name:dataStr.lenData[3],
            				type:'line',
            				smooth: true,
            				showSymbol: false,
            				data:dataStr.FCData
        				},
        				{
            				name:dataStr.lenData[4],
            				type:'line',
            				smooth: true,
            				showSymbol: false,
            				data:dataStr.toHisData
        				},
        				{
            				name:dataStr.lenData[5],
            				type:'line',
            				smooth: true,
            				showSymbol: false,
            				data:dataStr.toData
        				}
    				];
    			if(dataStr.dayFlag=="after"){
	    			series= [
	        				{
	            				name:dataStr.lenData[0],
	            				type:'line',
	            				smooth: true,
	            				showSymbol: false,
	            				data:dataStr.hisData
	        				},
	        				{
	            				name:dataStr.lenData[1],
	            				type:'line',
	            				smooth: true,
	            				showSymbol: false,
	            				data:dataStr.hisFCData
	        				},
	        				{
	            				name:dataStr.lenData[2],
	            				type:'line',
	            				smooth: true,
	            				showSymbol: false,
	            				data:dataStr.data
	        				},
	        				{
	            				name:dataStr.lenData[3],
	            				type:'line',
	            				smooth: true,
	            				showSymbol: false,
	            				data:dataStr.FCData
	        				},
	        				{
	            				name:dataStr.lenData[4],
	            				type:'line',
	            				smooth: true,
            					showSymbol: false,
	            				data:dataStr.toData
	        				}
	    				]
    				}
    			for ( var i = 0; i < series.length; i++) {
					var yNewData = new Array();
					for ( var j = 0; j < series[i].data.length; j++) {
						if(series[i].data[j]){
							yNewData[j] = series[i].data[j];
						}else{
							yNewData[j] = "-";
						}
					}
					series[i].data = yNewData;
				}
        		// ָ��ͼ���������������
        		var option = {
            		title: {
        				text: 'Ԥ�����Աȷ���',
        				x: 'center'
    				},
    				tooltip: {
        				trigger: 'axis',
    				},
    				legend: {
    					y: 'bottom',
        				data:dataStr.lenData
    				},
    				grid: {
        				left: '5%',
        				right: '4%',
        				bottom: '11%'
    				},
    				xAxis: {
        				type: 'category',
        				axisLabel: {
							rotate:30  //��������겻���������Բ��ô˷�ʽ����б45��
						},
        				data: dataStr.xData
    				},
    				yAxis: {
    					name: '����:����',
    					//min:dataStr.minval,
    					scale:true,
        				type: 'value'
    				},
    				series : series
        		};

        		// ʹ�ø�ָ�����������������ʾͼ����
        		myChart.setOption(option);
	}
	//չʾ����Ԥ�ⷽ���Ա�
	function showAllLine(id,data){
		var myecharts = echarts.init(document.getElementById(id),'macarons');
		var xAxisData = data[0].slice(1);
		
		var legendData = [];
		var series = [];
		$.each(data.slice(1), function (index, item) {
			  legendData.push(item.slice(0,1)[0]);
				var seriesBean = {
					name:item.slice(0,1),
					type:'line',
					smooth: true,
           			showSymbol: false,
					data:item.slice(1)
				}
			  series.push(seriesBean);
        });
        for ( var i = 0; i < series.length; i++) {
			var yNewData = new Array();
			for ( var j = 0; j < series[i].data.length; j++) {
				if(series[i].data[j]){
					yNewData[j] = series[i].data[j];
				}else{
					yNewData[j] = "-";
				}
			}
			series[i].data = yNewData;
		}
		var legend = {
		     y: 'bottom',
	         data:legendData
		}
	   // ָ��ͼ���������������
   		var option = {
       		title: {
   				text: 'Ԥ�����Աȷ���',
   				x: 'center'
			},
			tooltip: {
   				trigger: 'axis',
			},
			legend: legend,
			grid: {
   				left: '5%',
   				right: '4%',
   				bottom: '11%'
			},
			xAxis: {
   				type: 'category',
   				axisLabel: {
				rotate:30  //��������겻���������Բ��ô˷�ʽ����б45��
			},
 			data:xAxisData
		},yAxis: {
				name: '����:����',
				//min:dataStr.minval,
				scale:true,
   				type: 'value'
			},
			series : series
   		};

     		// ʹ�ø�ָ�����������������ʾͼ����
	     myecharts.setOption(option);
	}
</script>
<tsing:dateSelectInHead formName="form1" prefix="his"/>
</head>
<body class="right-body">
	<form action="<tsing:root/>/stforecast?command=forecastResultContrast" method="post" name="form1">
	<table width="100%" > 
        <tr>
        	<td colspan="2" border="0"  cellpadding="0" cellspacing="0" class="location" >��ǰλ�ã�����Ԥ�� -> Ԥ�����Աȷ���</td>
        </tr>
   	</table>
    <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0" class="maintilte">
     	<tr>
              <td width="3%" align="center" valign="middle" ><img src="<tsing:imageDir/>/dian6.gif" width="19" height="19" id="arrow_1" style="display:none" ><img src="<tsing:imageDir/>/dian6nc.gif" width="19" height="19" id="arrow_1_1" style="display:"></td>
              <td width="97%" >������ѯ</td>
        </tr>
    </table>
    <table width="100%"  border="0" cellpadding="0" cellspacing="0"  class="tableborder">
       <tr>
         <td>
			<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="tbg">
                   <tr>
                     <td width="16%" height="35" class="biaodan-top" align="center">��λ��</td>
                     <td width="62%" class="biaodan-q">
                          &nbsp;&nbsp;<tsing:netList name="netID" selected="${netID}"/> 
	                      &nbsp;<tsing:caliber name="caliberID" selected="${caliberID}"/>
                     </td>
                     <td width="22%" rowspan="2" align="center" class="biaodan-q">
	                   <input type="submit" id="queryBtn" class="button_green2" value=" ��  ѯ ">&nbsp;
	                 </td>
                   </tr>
                   <tr>
		             <td height="35" class="biaodan-top" align="center">ʱ�䣺</td>
		             <td height="35" class="biaodan-q">
		               &nbsp;&nbsp;<tsing:dateSelect type="YMD" prefix="his"  selected="${today}" formName="form1"/>
		             </td>
		          </tr>
                </table>
              </td>
            </tr>
          </table>
         <center>           
    <table width="100%">       
       <tr>
         <td align=center>
           </br>
           <div id="tabs">
				<ul>
					<li><a href="#tabs-1">�ϱ�Ԥ����(<span style="font-family:Arial;font-size:16px;font-weight:bold;font-style:normal;text-decoration:none;color:#FF9900;">${fcHRate}</span>%)</a></li>
					<li><a href="#tabs-2">�����ۼ��㷨(<span style="font-family:Arial;font-size:16px;font-weight:bold;font-style:normal;text-decoration:none;color:#FF9900;">${fcRate}</span>%)</a></li>
					<li><a href="#tabs-3">���������㷨(<span style="font-family:Arial;font-size:16px;font-weight:bold;font-style:normal;text-decoration:none;color:#FF9900;">${weatherRate}</span>%)</a></li>
					<li><a href="#tabs-4">AI�����㷨(<span style="font-family:Arial;font-size:16px;font-weight:bold;font-style:normal;text-decoration:none;color:#FF9900;">${fcARate}</span>%)</a></li>
					<li><a href="#tabs-6">AI�㷨(<span style="font-family:Arial;font-size:16px;font-weight:bold;font-style:normal;text-decoration:none;color:#FF9900;">${AIRate}</span>%)</a></li>
					<li><a href="#tabs-5">Ԥ�����Ա�<span style="font-family:Arial;font-size:16px;font-weight:bold;font-style:normal;text-decoration:none;color:#FF9900;">&nbsp;</span></a></li>
					
				</ul>
				<div id="tabs-1"><div id="contrastChart1" style="width: 1000px;height:400px;"></div></div>
				<div id="tabs-2"><div id="contrastChart2" style="width: 1000px;height:400px;"></div></div>
				<div id="tabs-3"><div id="contrastChart3" style="width: 1000px;height:400px;"></div></div>
				<div id="tabs-4"><div id="contrastChart4" style="width: 1000px;height:400px;"></div></div>
				<div id="tabs-6"><div id="contrastChart6" style="width: 1000px;height:400px;"></div></div>
				<div id="tabs-5"><div id="contrastChart5" style="width: 1000px;height:400px;"></div></div>
			</div>
         </td>
       </tr>
   </table>
   <table align="center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"  class="maintilte"> 
	   <tr>
	     <td width="3%" align="center" valign="middle" ><img src="<tsing:imageDir/>/dian6.gif" width="19" height="19" id="arrow_1" style="display:none" ><img src="<tsing:imageDir/>/dian6nc.gif" width="19" height="19" id="arrow_1_1" style="display:"></td>
	     <td width="96%">${year}��${month}��${day}��&nbsp;��������&nbsp;&nbsp; (����:����,��:%,�յ���:����ʱ)</td>
	   </tr>
	</table>
    <table align="center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder">
		<tr>
			<td>
				<table align="center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="table table-striped table-bordered"> 
      				<tsing:tableDataDisplay tableID="tableData"  headerHeight="20" dataHeight= "18" headerClass="biaodan-top" dataClass="biaodan-q" dataAlignCenter="0" isSingleAndDoubleClass="true"/>
    			</table>
			</td>
		</tr>
	</table>
	</br>
	<table align="center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"  class="maintilte"> 
	   <tr>
	     <td width="3%" align="center" valign="middle" ><img src="<tsing:imageDir/>/dian6.gif" width="19" height="19" id="arrow_1" style="display:none" ><img src="<tsing:imageDir/>/dian6nc.gif" width="19" height="19" id="arrow_1_1" style="display:"></td>
	     <td width="96%">${year}��${month}��${day}��&nbsp;����׼ȷ��&nbsp;&nbsp; (����:����,׼ȷ��:%)</td>
	   </tr>
	</table>
    <table  align="center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder">
		<tr>
			<td>
			<div id="hisDiv" style="overflow-x: auto; overflow-y: auto; ">
				<table align="center" width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="table table-striped table-bordered"> 
      				<tsing:tableDataDisplay tableID="tableHData"  headerHeight="20" dataHeight= "18" headerClass="biaodan-top" dataClass="biaodan-q" dataAlignCenter="0" isSingleAndDoubleClass="true"/>
    			</table>
    		</div>
			</td>
		</tr>
	</table>
  </center>
</form>
<br/>
<br/>
<br/>
</body>
</html>